<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue3.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-3.6.1.js"></script>
  </head>
  <body>
    <section class="p-5"></section>
    <div id="app">
      <section class="p-5">
        <div class="container">
          <div class="row my-3">
            <div class="col-4"></div>
            <div
              class="col-4 border border-2 rounded-3 shadow p-3 mb-5 bg-body rounded"
            >
              <div class="p-5">
                <h1 class="text-center">Login</h1>
              </div>
              <div class="form-floating mb-3 mt-3">
                <input
                  type="text"
                  class="form-control mydata"
                  v-model="username"
                  @blur="insert($event)"
                  id="floatingInput"
                  placeholder="Username"
                />
                <label for="floatingInput">Username</label>
              </div>
              <div class="form-floating mb-3">
                <input
                  type="password"
                  class="form-control mydata"
                  v-model="password"
                  @blur="insert($event)"
                  id="floatingPassword"
                  placeholder="Password"
                />
                <label for="floatingPassword">Password</label>
              </div>
              <div class="d-grid gap-2 mt-5 col-6 mx-auto">
                <button
                  id="xh_login_btn"
                  type="button"
                  @click="getData()"
                  class="btn btn-primary btn-lg"
                  disabled
                >
                  Login in
                </button>
              </div>
              <div class="p-5 text-center">
                <a href="register.html" class="link-info">Go Register</a>
              </div>
            </div>
            <div class="col-4"></div>
          </div>
        </div>
      </section>
    </div>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            message: "登录",
            username: "",
            password: "",
          };
        },
        methods: {
          insert(e) {
            if (!e.target.value.trim()) {
              this.changeBtndisable();
            } else {
              this.changeBtnable();
            }
          },
          changeBtndisable() {
            $("#xh_login_btn").attr("disabled", "true");
          },
          changeBtnable() {
            if (!(this.isEmpty() === false)) {
              $("#xh_login_btn").removeAttr("disabled");
            }
          },
          isEmpty() {
            var flag = true;
            $(".mydata").each(function (i, item) {
              if (!item.value.trim()) {
                flag = false;
                return false;
              }
            });
            return flag;
          },
          getData() {
            axios({
              method: "POST",
              url: `http://192.168.50.171:80/messagebook/userinfo/login`,
              data: {
                username: this.username,
                password: this.password,
              },
              headers: {
                "Content-Type": "application/json;charset=UTF-8",
              },
            })
              .then((resp) => {
                console.log(resp);
                if(resp.data.msg == "successful"){
                  let data = resp.data.data
                  sessionStorage.setItem('userinfo',JSON.stringify(data))
                  window.location.href="/test.html"
                }else{
                  alert("用户名或密码不正确")
                }
              })
              .catch((err) => {
                console.log(err);
              });
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
